// 获取canvas标签
let myCanvas = document.getElementById("cvs")

// 获取上下文对象
let context = myCanvas.getContext("2d");
















// 是否开始画画
let isDraw = false;

// 记录画笔最后一次的位置
let lastPoint = {
    x: undefined,
    y: undefined
};

// 是否开启橡皮擦
let eraserEnabled = false


// 鼠标单击
myCanvas.onmousedown = function(e) {
    isDraw = true;
    let x = e.clientX;
    let y = e.clientY;
    // 记录最后一次位置
    lastPoint = {
        'x': x,
        'y': y
    };
}

// 鼠标移动
myCanvas.onmousemove = function(e) {
    if (isDraw) {
        let x = e.clientX;
        let y = e.clientY;
        let newPoint = {
            'x': x,
            'y': y
        };
        drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y);
        lastPoint = newPoint;
    }
}

// 鼠标弹起
myCanvas.onmouseup = function(e) {
    isDraw = false;
}








// 画线
function drawLine(x1, y1, x2, y2) {
    // 开启一条路径
    context.beginPath()
        // 设置线条宽度
    context.lineWidth = 10;
    // 设置线条末端样式。
    context.lineCap = "round";
    // 设定线条与线条间接合处的样式
    context.lineJoin = "round";
    // moveTo(x,y)将笔触移动到指定的坐标x以及y上
    context.moveTo(x1, y1);
    // lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
    context.lineTo(x2, y2);
    // 通过线条来绘制图形轮廓
    context.stroke();
    context.closePath();
}

var brush = document.querySelector('.brush')
var eraser = document.querySelector('.eraser')
var clear = document.querySelector('.clear')
var black = document.querySelector('.black')
var red = document.querySelector('.red')
var green = document.querySelector('.green')
var blue = document.querySelector('.blue')
var skyblue = document.querySelector('.skyblue')
var orange = document.querySelector('.orange')
let save = document.querySelector('.save')




black.onclick = function() {
    context.strokeStyle = "black";
    black.classList.add('active')
    red.classList.remove('active')
    green.classList.remove('active')
    blue.classList.remove('active')
    skyblue.classList.remove('active')
    orange.classList.remove('active')
}
red.onclick = function() {
    context.strokeStyle = "red";
    red.classList.add('active')
    black.classList.remove('active')
    green.classList.remove('active')
    blue.classList.remove('active')
    skyblue.classList.remove('active')
    orange.classList.remove('active')
}
green.onclick = function() {
    context.strokeStyle = "green";
    green.classList.add('active')
    black.classList.remove('active')
    red.classList.remove('active')
    blue.classList.remove('active')
    skyblue.classList.remove('active')
    orange.classList.remove('active')
}
blue.onclick = function() {
    context.strokeStyle = "blue";
    blue.classList.add('active')
    black.classList.remove('active')
    red.classList.remove('active')
    green.classList.remove('active')
    skyblue.classList.remove('active')
    orange.classList.remove('active')
}
skyblue.onclick = function() {
    context.strokeStyle = "skyblue";
    skyblue.classList.add('active')
    black.classList.remove('active')
    red.classList.remove('active')
    green.classList.remove('active')
    blue.classList.remove('active')
    orange.classList.remove('active')
}
orange.onclick = function() {
    context.strokeStyle = "orange";
    orange.classList.add('active')
    black.classList.remove('active')
    red.classList.remove('active')
    green.classList.remove('active')
    skyblue.classList.remove('active')
    blue.classList.remove('active')
}
save.onclick = function() {
    let imgUrl = myCanvas.toDataURL('image/png');
    let saveA = document.createElement('a');
    document.body.appendChild(saveA);
    saveA.href = imgUrl;
    saveA.download = 'mypic' + (new Date).getTime();
    saveA.target = '_blank';
    saveA.click();
}

// 笔刷
brush.onclick = function() {
    context.strokeStyle = "black";
    document.body.style.cursor = 'crosshair'
    brush.classList.add('active')
    eraser.classList.remove('active')
    clear.classList.remove('active')
}

// 橡皮擦
eraser.onclick = function() {
    eraserEnabled = true;
    context.lineWidth = 50;
    document.body.style.cursor = 'pointer'
    context.strokeStyle = 'white'
    eraser.classList.add('active')
    brush.classList.remove('active')
    clear.classList.remove('active')
}

// 清空
clear.onclick = function() {
    context.clearRect(0, 0, myCanvas.width, myCanvas.height);
}








// 屏幕适配
function pageSize() {
    let pageWidth = document.documentElement.clientWidth;
    let pageHeight = document.documentElement.clientHeight;
    myCanvas.width = pageWidth;
    myCanvas.height = pageHeight;
}
pageSize()